<!-- 公共-表格 -->
<template>
  <view class="table-box" :style="{ height: maxHeight + 'px' }">
    <scroll-view
      scroll-x="true"
      :scroll-y="true"
      :style="{ height: maxHeight + 'px' }"
      v-if="tableData.length > 0"
    >
      <!-- 表头区 -->
      <view class="table-header" v-if="isShowHeader">
        <view v-for="(item, index) in columns" :key="index">
          <view
            class="table-header-item"
            :style="{ width: item.width + 'px', textAlign: item.align || 'center' }"
          >
            {{ item.name }}
          </view>
        </view>
      </view>
      <!-- 内容区 -->
      <view class="table-body">
        <view
          v-for="(item, index) in tableData"
          :key="index"
          class="table-body-item"
          :class="index === tableData.length - 1 ? 'table-body-item-last' : ''"
        >
          <view
            v-for="(itemson, indexson) in columns"
            :key="indexson"
            class="table-body-item-content"
          >
            <view
              class="table-body-item-content-item"
              :style="{ width: itemson.width + 'px', textAlign: itemson.align || 'center' }"
              :class="itemson.ellipsis ? 'ellipsis' : ''"
              :title="item[itemson.key]"
            >
              <template v-if="itemson.slot">
                <slot v-if="itemson.slot" :name="itemson.slot" :row="item"></slot>
              </template>
              <template v-else>
                <text>{{ item[itemson.key] }}</text>
              </template>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="table-empty" v-else>暂无数据</view>
  </view>
</template>
<script>
export default {
  name: 'zcgTable',
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    isShowHeader: {
      type: Boolean,
      default: true,
    },
    maxHeight: {
      type: Number,
      default: 200,
    },
  },
}
</script>
<style lang="scss" scoped>
.table-box {
  border-top: 1rpx solid #ececec;
  border-left: 1rpx solid #ececec;
  border-right: 1rpx solid #ececec;
  padding: 20rpx;
  overflow: hidden;
  .table-header {
    display: flex;
    .table-header-item {
      height: 60rpx;
      line-height: 60rpx;
      background: #dfe1ea;
      border: 1rpx solid #ececec;
    }
  }
  .table-body {
    .table-body-item {
      display: flex;
      border-left: 2rpx solid #ececec;
      .table-body-item-content {
        height: 60rpx;
        line-height: 60rpx;
        border-right: 4rpx solid #ececec;
        border-bottom: 1rpx solid #ececec;
        .table-body-item-content-item {
          display: flex;
          flex-direction: column;
          border-top: 1rpx solid #ececec;
        }
        .ellipsis {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .table-body-item-last {
      .table-body-item-content {
        border-bottom: 1rpx solid #ececec;
      }
    }
  }
  .table-empty {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #747477;
  }
}
</style>
